import React, { Fragment, useEffect, useRef, useState } from 'react'
import { observer, useLocalObservable } from 'mobx-react'
import Store from '../store'
import styles from './index.module.less'
import { Input, Image, Toast } from 'antd-mobile'
import lightImg from '@/resource/vision/light.png'
import { history, useLocation, useParams } from 'umi'

const Conversation = observer(() => {
    const store = useLocalObservable(() => Store)
    const { questionList, updateAnswer, getInfo, info, getQuestionListData } = store
    const [idx, setIdx] = useState(1)
    const [text, setText] = useState('')
    const scrollRef = useRef<HTMLDivElement>()
    const { id } = useParams<any>()
    const {
        query: { isSubmitTraining },
    }: any = useLocation()
    const textLimit = [20, 100, 100, 100, 50, 100, 100]

    useEffect(() => {
        getQuestionListData(id)
        getInfo(id)
    }, [])

    const handleSend = () => {
        if (!text) {
            Toast.show('请先输入内容')
            return
        }
        updateAnswer(text, idx - 1)
        scrollBottom()
        setTimeout(() => {
            if (idx < questionList.length) {
                setIdx(index => index + 1)
            }
            setTimeout(() => {
                scrollBottom()
            })
        }, 300)
        setText('')
    }

    function scrollBottom() {
        if (scrollRef.current) {
            scrollRef.current.scrollTop = (scrollRef.current?.scrollHeight || 0) + 500
        }
    }

    /** 提交 */
    function nextStep() {
        history.push(`/vision/list/${id}?first=1&isSubmitTraining=${isSubmitTraining}`)
    }

    if (!info.id) {
        return null
    }

    return (
        <div className={styles.container}>
            <div className={styles.header}>
                <div className={styles.title}>
                    <Image className="light" src={lightImg} />
                    <span>
                        请依次回答以下问题（{idx}/{questionList.length}）
                    </span>
                </div>
            </div>
            <div ref={scrollRef} className={styles.scroll_wrapper}>
                {questionList.slice(0, idx).map(item => {
                    return (
                        <Fragment key={item.id}>
                            <div className={styles.ques_wrapper}>
                                <span>{item.title}</span>
                            </div>
                            {item?.answer && (
                                <div className={styles.answet_wrapper}>
                                    <span>{item.answer}</span>
                                </div>
                            )}
                        </Fragment>
                    )
                })}
                {idx === 7 && questionList[questionList.length - 1].answer && (
                    <div className={styles.next_step_btn} onClick={nextStep}>
                        下一步
                    </div>
                )}
            </div>
            <div className={styles.bar_container}>
                <div className={styles.input_wrapper}>
                    <Input className={styles.input} value={text} onChange={setText} placeholder="发送信息" maxLength={textLimit[idx - 1]} />
                </div>
                <div className={styles.send_btn} onClick={handleSend}>
                    发送
                </div>
            </div>
        </div>
    )
})

export default Conversation
